<template>
  <!--- 指定展开和全部展开不能同时使用 所以用props.defaultExpandAll判别--->
  <div v-if="treeData.length">
    <a-tree v-if="!props.defaultExpandAll" v-model:expandedKeys="expanded_Keys" :selectedKeys="selected_Keys"
      v-model:checkedKeys="checked_Keys" :autoExpandParent="autoExpandParent" :checkable="props.checkable"
      :checkStrictly="props.checkStrictly" :tree-data="treeData" :field-names="props.fieldNames" :selectable="selectable"
      :height="props.height" @select="getSelectKeys" @expand="getExpendKeys" @check="getCheckedKeys"
      :blockNode="blockNode">
      <template #title="record" v-slot="slotProps">
        <span>{{ record[titleName] }}</span>
        <slot name="slotProps" :id="record.id"></slot>
      </template>
    </a-tree>
    <a-tree v-else :selectedKeys="selected_Keys" v-model:checkedKeys="checked_Keys" :autoExpandParent="autoExpandParent"
      :defaultExpandAll="props.defaultExpandAll" :checkable="props.checkable" :checkStrictly="props.checkStrictly"
      :tree-data="treeData" :field-names="props.fieldNames" :selectable="selectable" :height="props.height"
      @select="getSelectKeys" @expand="getExpendKeys" @check="getCheckedKeys" :blockNode="blockNode">
      <template #title="record" v-slot="slotProps">
        <span>{{ record[titleName] }}</span>
        <slot name="slotProps" :id="record.id"></slot>
      </template>
    </a-tree>
  </div>
  <a-empty v-else>
    <p style="color: #b6b6b6">{{ props.reasion }}</p>
  </a-empty>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
import Treeprops from "./treeConfig/props";
//props
const props = defineProps(Treeprops);
//emits
const emit = defineEmits(["selected_Keys", "expanded_Keys", "checked_Keys"]);
//data
const treeData = ref<any[]>(props.treeData);
let titleName = ref<string>(props.fieldNames.title);
const expanded_Keys = ref<string[]>([]);
const selected_Keys = ref<(string | number)[]>([]);
const checked_Keys = ref<string[]>([]);
const blockNode = ref<Boolean>(false);
//watch
watch(
  () => props.treeData,
  (newVal, oldVal) => {
    if (JSON.parse(JSON.stringify(newVal)) != JSON.parse(JSON.stringify(oldVal || []))) {
      treeData.value = newVal;
    }
  },
  { deep: true }
);
watch(
  () => props.selectedKeys,
  (newVal, oldVal) => {
    if (newVal != oldVal) {
      selected_Keys.value = newVal;
    }
  },
  { deep: true }
);
watch(
  () => props.expandedKeys,
  (newVal, oldVal) => {
    if (newVal != oldVal) {

      expanded_Keys.value = newVal;
    }
  },
  { deep: true, immediate: true }
);
watch(
  () => props.checkedKeys,
  (newVal, oldVal) => {
    if (newVal != oldVal) {
      checked_Keys.value = newVal;
    }
  },
  { deep: true }
);
// methods

const getSelectKeys = (selectedKeys: [], e: any) => {
  selectedKeys.length ? (selected_Keys.value = selectedKeys) : ""; // 必须要选中，不能点掉不选,所以也不能能用v-model绑定

  emit("selected_Keys", { selected_Keys: selected_Keys.value, e });
};
const getExpendKeys = (expandedKeys: [], e: any) => {
  expanded_Keys.value = expandedKeys;
  emit("expanded_Keys", { expandedKeys, e });
};
const getCheckedKeys = (checkedKeys: any, e: any) => {
  checked_Keys.value = checkedKeys;
  emit("checked_Keys", { checkedKeys, e });
};
</script>

<style></style>
